<template>
    <div class="course-edit">
        <el-drawer v-model="isDrawer" size="600" :before-close="close">
            <template #header>
                编辑课程
            </template>
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="基础信息" name="first">
                    <el-form :model="coureseData" :rules="rule" ref="baseFormRef">
                        <el-form-item label="项目" prop="kindName">
                            <el-input v-model="coureseData.kindName" disabled />
                        </el-form-item>
                        <el-form-item label="课程名称" prop="courseName">
                            <el-input v-model="coureseData.courseName" disabled />
                        </el-form-item>
                        <el-form-item label="原价" prop="originAlPrice">
                            <el-input v-model="coureseData.originAlPrice">
                                <template #prefix>
                                    ￥
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="售价" prop="sellingPrice">
                            <el-input v-model="coureseData.sellingPrice">
                                <template #prefix>
                                    ￥
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="底价" prop="downPrice">
                            <el-input v-model="coureseData.downPrice">
                                <template #prefix>
                                    ￥
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="课程封面" name="second">
                    <el-form :model="couverInfo">
                        <el-form-item label="课程描述">
                            <el-input v-model="coureseData.description"></el-input>
                        </el-form-item>
                        <el-form-item label="更换封面">
                            <el-upload v-model:file-list="couverInfo.file" :auto-upload="false" :limit="1"
                                accept=".png,.jpg">
                                <el-button type="primary">选择文件</el-button>
                                <template #tip>
                                    建议:课程封面大小建议上传1125*633,不超过5M,格式为jpg,png
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <el-image :src="coureseData.coverImage" :preview-src-list="[coureseData.coverImage]" :initial-index="0"
                        fit="cover"></el-image>
                </el-tab-pane>
            </el-tabs>
            <!-- 抽屉底部页脚 取消和确定按钮 -->
            <template #footer>
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="commit">确认</el-button>
            </template>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref, defineExpose, defineEmits } from 'vue'
import { quiFn } from '@/hooks/quiFn'; // 弹窗插件
import { reviseCourseBase, reviseCover } from '@/apis/course'
import { ElMessage } from 'element-plus';
const isDrawer = ref(false)
const coureseData = ref({}) // 存放课程信息
// 默认选中tab中的基础信息
const activeName = ref('first')
// 表单校验规则
const rule = ref({
    kindName: { required: true, message: '项目名是必填项', trigger: 'blur' },
    courseName: { required: true, message: '课程名称是必填项', trigger: 'blur' },
    originAlPrice: { required: true, message: '原价是必填项', trigger: 'blur' },
    sellingPrice: { required: true, message: '售价是必填项', trigger: 'blur' },
    downPrice: { required: true, message: '底价是必填项', trigger: 'blur' }
})

// 打开抽屉
const open = async (row) => {
    // 将父组件传来的课程信息进行保存
    await initData(row)
    isDrawer.value = true
}

// form组件的ref
const baseFormRef = ref({})
// 关闭抽屉
const close = () => {
    quiFn({}, closeNoFn)
}

const closeNoFn = () => {
    isDrawer.value = false
    activeName.value = 'first'
    baseFormRef.value.clearValidate() // 清空校验
}

// 确认按钮
const emit = defineEmits(['change'])
const commit = async () => {
    if (activeName.value == 'first') {
        // 基础信息提交
        baseFormRef.value.validate(async (value) => { // 表单校验
            if (value) {
                // 校验通过
                const { data } = await reviseCourseBase(coureseData.value)
                if (!data.code) {
                    ElMessage.success(data.txt)
                    closeNoFn()
                    emit("change")
                }
            }
        })

    } else {
        // 课程封面提交
        const coverInfoValue = couverInfo.value
        console.log(coverInfoValue);
        if (coureseData.value.description || coverInfoValue.file.length) {
            // 保证任意一项有值
            let formData = new FormData()
            formData.append('courseName', coureseData.value.courseName)
            if (coureseData.value.description) {
                formData.append('description', coureseData.value.description)
            }
            if (coverInfoValue.file.length) {
                formData.append('file', coverInfoValue.file[0].raw)
            }
            const { data } = await reviseCover(formData)
            console.log(data);
            if (!data.code) {
                ElMessage.success('修改成功')
                closeNoFn()
                emit('change')
                coverInfoValue.file = [];
            } else {
                ElMessage.error('修改失败')
            }
        }
    }
}
// 初始化课程信息
const initData = (row) => {
    for (const key in row) {
        coureseData.value[key] = row[key]
    }
}


const couverInfo = ref({
    file: []
})


// 导出方法
defineExpose({
    open,
})

</script>


<style lang="scss">
.el-image__inner {
    height: 200px;
}
</style>